<template>
	<view class="container">
		<view v-for="(item,index) in followList" class="item">
			<view class="info">
				<u-image width="92rpx" height="92rpx" src="https://dotflat-saas-res.oss-cn-shanghai.aliyuncs.com/xybaby365/app/icons/icon_photo_teacher.png"></u-image>
				<view class="desc">
					<text class="name">{{item.staffName}}</text>
					<text class="time">{{formateDate(item.actualFollowDate)}}</text>
				</view>
			</view>
			<text class="content">{{item.content}}</text>
		</view>
		<fab @fabClick="fabClick"></fab>
	</view>
</template>

<script>
	import {
		getLeadsFollow,
		getClienteleFollow,
		getClienteleDetail
	} from '@/api/clientele.js'
	import {
		formatDateByTimestamp
	} from '@/utils/utils.js'
	import Fab from '@/components/fab.vue'
	export default {
		name: "ClienteleDynamicsView",
		components: {
			Fab
		},
		props: {
			type: {
				type: String,
				default () {
					return '0'
				}
			},
			clientelesId: {
				type: String,
				default () {
					return ''
				}
			}
		},
		data() {
			return {
				followList: [],
				
				leadsId: ''
			}
		},
		created() {
			this.getLeadDetail();
			this.getFollow();
		},
		methods: {
			getFollow() {
				console.log(this.type)
				if (this.type === '1') {
					getLeadsFollow(this.clientelesId).then(res => {
						this.followList = res.data.content;
					})
				} else if (this.type === '0') {
					getClienteleFollow(this.clientelesId).then(res => {
						console.log(res)
						this.followList = res.data.content;
					})
				}
			},

			formateDate(time) {
				return formatDateByTimestamp(time, 'yyyy-mm-dd hh:MM');
			},
			
			fabClick() {
				const { type, clientelesId, leadsId } = this
				const typeStr = type === '1' ? 'clue' : 'client';
				uni.navigateTo({
					url: `pages_operate/clientele/follow-add-page?type=${typeStr}&id=${clientelesId}&leadsId=${leadsId}`,
					events: {
						addSuccess: (data) => {
							this.getFollow();
						}
					}
				})
			},
			
			getLeadDetail() {
				if (this.type === '0') {
					getClienteleDetail(this.clientelesId).then(res => {
						console.log(res);
						this.leadsId = res.data.leadsId;
					})
				}
			},
		}
	}
</script>

<style lang="scss">

	.container {
		padding: 40rpx;
	}

	.item {
		display: flex;
		flex-direction: column;

		background-color: #FFFFFF;
		border-radius: 40rpx;
		min-height: 200rpx;
		margin-bottom: 20rpx;
		padding: 30rpx;

		.info {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-bottom: 20rpx;

			.desc {
				display: flex;
				flex-direction: column;
				margin-left: 20rpx;

				.name {
					font-size: 30rpx;
					color: $app-font-color;
				}

				.time {
					font-size: 20rpx;
					color: $app-font-color;
				}
			}
		}

		.content {
			font-size: 26rpx;
		}
	}
</style>
